<template>
	<div>
		<view class="flash-sale">
			<view class="header">
				<img mode="widthFix" class="presellBg" :src="module ? 'https://gbay1.dcyu.com/uploads/images/presell_bg.png' : 'https://gbay1.dcyu.com/uploads/images/module_bg.jpg'" alt="" />
			</view>
			<view class="main_count">
				<view class="presellList acea-row row-between-wrapper">
					<view class="timeList">
						<block v-for="(item, index) in timeList" :key="index" v-if="module == 1">
							<view @tap="settimeList(item, index)" class="item" :class="active == index ? 'on' : ''">
								<view class="time">
									<span>{{ item }}</span>
								</view>
							</view>
						</block>
						<scroll-view :scroll-x="true" class="scroll" v-if="module == 0">
							<view class="item1" @tap="btnhotbest(item.store_category_id)" v-for="(item, index) in categorylist" :key="index" :class="index == index ? 'on' : ''">
								<span :class="active1 == item.store_category_id ? 'an' : ''">{{ item.cate_name }}</span>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="list">
					<block v-for="(item, index) in hotbestlist" :key="index" v-if="module == 0">
						<view class="item acea-row row-between-wrapper" @tap="Details(item.product_id)">
							<view class="pictrue"><image :src="item.image"></image></view>
							<view class="text acea-row row-column-around">
								<view
									class="name"
									style="height:84rpx; -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;"
								>
									{{ item.store_name }}
								</view>
								<view v-if="item.coupon" class="coupon acea-row row-between-wrapper" style="margin-top: 14rpx;">
									<view class="hide line1 acea-row">
										<view class="activity">满{{ item.coupon.use_min_price }}减{{ item.coupon.coupon_price }}</view>
									</view>
								</view>
								<view style="display: flex;justify-content: space-between;margin-top: 24rpx;">
									<view style="color:#E6412E; display: flex;flex-direction: column;">
										<text style="text-decoration: line-through;font-size: 24rpx;color: #999999;">
											¥
											<text>{{ item.ot_price }}</text>
										</text>
										<text>
											¥
											<text style="font-size: 40rpx;font-weight: bold;">{{ item.price }}</text>
										</text>
									</view>
									<view
										style="width: 140rpx; height: 70rpx; 
										background: linear-gradient(180deg,#fc5f4e, #f94338, #f72a24);border-radius: 12rpx;
										color: #FFFFFF;font-size: 28rpx; line-height: 70rpx;text-align: center;"
									>
										立即购买
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-for="(item, index) in presellList" :key="index" v-if="module == 1">
						<view class="item acea-row row-between-wrapper" @tap="goDetails(item)">
							<view class="pictrue"><image :src="item.product.image"></image></view>
							<view class="text acea-row row-column-around">
								<view class="name line1">{{ item.store_name }}</view>
								<view class="booking">
									<text v-if="item.presell_type != 0 && active != 0" class="count" style="color: #999;">
										已预定{{ item.seles ? item.seles : 0 }}{{ item.product.unit_name }}
									</text>
									<text v-else style="color: #999; font-size: 24rpx;">暂未开始</text>
								</view>
								<view v-if="item.coupon" class="coupon acea-row row-between-wrapper" style="margin-top: 14rpx;">
									<view class="hide line1 acea-row">
										<view class="activity">满{{ item.coupon.use_min_price }}减{{ item.coupon.coupon_price }}</view>
									</view>
								</view>
								<view class="progress">
									<view class="presell_price">
										<text class="presell_text">预售价</text>
										<text class="price">
											¥
											<text>{{ item.price }}</text>
										</text>
									</view>
									<view v-if="active != 0" class="order_btn">{{ active === 1 ? '立即预定' : '已结束' }}</view>
									<view v-else class="unStartBtn">
										<text>开售时间</text>
										<view>
											{{ new Date(item.start_time.replace(/-/g, '/')).getMonth() + 1 }}月 {{ new Date(item.start_time.replace(/-/g, '/')).getDate() }}日
											{{
												new Date(item.start_time.replace(/-/g, '/')).getHours() < 10
													? '0' + new Date(item.start_time.replace(/-/g, '/')).getHours()
													: new Date(item.start_time.replace(/-/g, '/')).getHours() || '00'
											}}:
											{{
												new Date(item.start_time.replace(/-/g, '/')).getMinutes() < 10
													? '0' + new Date(item.start_time.replace(/-/g, '/')).getMinutes()
													: new Date(item.start_time.replace(/-/g, '/')).getMinutes() || '00'
											}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<view style="text-align: center; margin-bottom: 10rpx; font-size: 24rpx;" v-if="module == 0">{{ loadTitle }}</view>
				</view>
			</view>
		</view>
		<home></home>
	</div>
</template>

<script>
import { getSeckillIndexTime, getPresellList, hotbest } from '../../../api/activity.js';
import { getIndexData } from '@/api/api.js';
import home from '@/components/home/index.vue';
export default {
	components: {
		home
	},
	data() {
		return {
			module: 0,
			topImage: '',
			presellList: [],
			timeList: ['未开始', '正在进行', '已结束'],
			active1: '',
			active: 1,
			type: 0,
			scrollLeft: 0,
			interval: 0,
			status: 1,
			page: 1,
			limit: 8,
			loading: false,
			loadend: false,
			pageloading: false,
			categorylist: [],
			hotbestlist: [],
			loadTitle: '', //加载文本
		};
	},
	/**
	 * 用户点击右上角分享
	 */
	// #ifdef MP
	onShareAppMessage: function() {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		return {
			title: '预售活动',
			path: 'pages/activity/presell/index'
		};
	},
	onShareTimeline: function() {
		return {
			title: '预售活动',
			query: {
				key: ''
			},
			imageUrl: ''
		};
	},

	// #endif
	onLoad(option) {
		this.module = option.module;
		this.getPresellProductList();
		this.hotbest();
		this.getIndexData();
		let title = option.module ? '必买好货' : '预售';
		uni.setNavigationBarTitle({
			title: title
		});
	},

	methods: {
		Details: function(id) {
			uni.navigateTo({
				url: '/pages/goods_details/index?id=' + id
			});
		},
		getIndexData: function() {
			getIndexData().then(res => {
				res.data.category.unshift({
					store_category_id: '',
					cate_name: '全部'
				});
				this.categorylist = res.data.category;
			});
		},
		btnhotbest(store_category_id){
			this.page=1
			this.loadend=false
			this.active1 = store_category_id;
			this.hotbestlist=[]
			this.hotbest()
		},
		hotbest: function() {
			var data = {
				page: this.page,
				limit: this.limit,
				store_category_id: this.active1 == undefined ? '' : this.active1
			};
			if (this.loadend) return;
			hotbest(data).then(res => {
				this.hotbestlist = this.$util.SplitArray(res.data.list, this.hotbestlist);
				let loadend = res.data.list.length < this.limit;
				this.loadend = loadend;
				this.loadTitle = loadend ? '全部加载' : '加载更多';
			});
		},
		getPresellProductList: function() {
			var that = this;
			var data = {
				page: that.page,
				limit: that.limit,
				type: that.active
			};
			if (that.loadend) return;
			if (that.pageloading) return;
			this.pageloading = true;
			getPresellList(data)
				.then(res => {
					var presellList = res.data.list;
					var loadend = presellList.length < that.limit;
					that.page++;
					(that.presellList = that.presellList.concat(presellList)), (that.page = that.page);
					that.pageloading = false;
					that.loadend = loadend;
				})
				.catch(err => {
					that.pageloading = false;
				});
		},
		settimeList: function(item, index) {
			var that = this;
			that.active = index;
			that.type = that.active;
			that.loadend = false;
			that.page = 1;
			that.presellList = [];
			// wxh.time(e.currentTarget.dataset.stop, that);
			that.getPresellProductList();
		},
		goDetails(item) {
			uni.navigateTo({
				url: '/pages/activity/presell_details/index?id=' + item.product_presell_id
			});
		}
	},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {
		this.getPresellProductList();
		this.hotbest();
	}
};
</script>

<style lang="scss">
.scroll {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	.item1 {
		display: inline-block;
		padding: 0 24rpx;
		font-size: 26rpx;
		color: #aaaaaa;
		font-weight: bold;
	}
	.an {
		color: #f98133;
		border-bottom: 2rpx solid #f98133;
	}
}
page {
	background-color: #ff7f21;
}
.noCommodity {
	border-top: none;
}
.flash-sale .header {
	width: 100%;
	position: relative;
}
.flash-sale .main_count {
	position: relative;
	top: -150rpx;
}
.flash-sale .header .presellBg {
	width: 750rpx;
}
.flash-sale .presellList {
	padding: 0 20rpx;
	bottom: 0;
	margin: 0 30rpx;
	width: 690rpx;
	background: #fff;
	border-radius: 16rpx;
	line-height: 80rpx;
	height: 80rpx;
}

.flash-sale .presellList .priceTag {
	width: 75rpx;
	height: 70rpx;
}

.flash-sale .presellList .priceTag image {
	opacity: 1;
}

.flash-sale .presellList .priceTag image {
	width: 100%;
	height: 100%;
}

.flash-sale .timeList {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	overflow: hidden;
}

.flash-sale .timeList .item {
	font-size: 20rpx;
	color: #666;
	text-align: center;
	box-sizing: border-box;
	width: 224rpx;
}

.flash-sale .timeList .item .time {
	font-size: 26rpx;
	color: #aaaaaa;
}

.flash-sale .timeList .item.on .time {
	color: #fd6523;
	font-weight: 600;
	span {
		position: relative;
		&::after {
			content: '';
			display: inline-block;
			width: 100%;
			height: 4rpx;
			background: #fd6523;
			position: absolute;
			left: 0;
			bottom: -4rpx;
			border-radius: 2rpx;
		}
	}
}
.activity {
	height: 56rpx;
	padding: 0 11px;
	color: #e93323;
	font-size: 22rpx;
	line-height: 50rpx;
	position: relative;
	background-image: url(https://gbay1.dcyu.com/uploads/images/couponBg.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

.flash-sale .list {
	margin-top: 24rpx;
}
.flash-sale .list .item {
	height: 278rpx;
	position: relative;
	width: 690rpx;
	margin: 0 auto 20rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 0 25rpx;
}

.flash-sale .list .item .pictrue {
	width: 240rpx;
	height: 240rpx;
	border-radius: 10rpx;
}

.flash-sale .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.flash-sale .list .item .text {
	width: 380rpx;
	font-size: 30rpx;
	color: #333;
}

.flash-sale .list .item .text .name {
	width: 100%;
	color: #282828;
	font-weight: bold;
	font-size: 28rpx;
}

.flash-sale .list .item .text .booking {
	font-size: 30rpx;
	color: #e93323;
}

.flash-sale .list .item .text .booking .count {
	font-size: 24rpx;
	color: #e93323;
}

.flash-sale .list .item .text .limit {
	font-size: 22rpx;
	color: #999;
	margin-bottom: 5rpx;
}

.flash-sale .list .item .text .limit .limitPrice {
	margin-left: 10rpx;
}

.flash-sale .list .item .text .progress {
	width: 392rpx;
	height: 74rpx;
	background-image: url(https://gbay1.dcyu.com/uploads/images/priceBg.png);
	background-size: 100%;
	margin-top: 16rpx;
	.presell_price {
		float: left;
		width: 50%;
		text-align: center;
		line-height: 15px;
		padding: 8rpx 0;
		.presell_text {
			display: block;
			color: #e93323;
			font-size: 20rpx;
		}
		.price {
			font-size: 26rpx;
			color: #e93323;
			text {
				font-weight: bold;
			}
		}
	}
	.order_btn {
		float: left;
		width: 50%;
		text-align: center;
		color: #ffffff;
		font-size: 26rpx;
		line-height: 76rpx;
	}
	.unStartBtn {
		float: left;
		width: 50%;
		text-align: center;
		color: #ffffff;
		font-size: 20rpx;
		padding: 8rpx 0;
		text {
			font-size: 22rpx;
		}
	}
}
</style>
